import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { useEffect, useState } from "react";
import { Badge } from "@/components/ui/badge";
import "@radix-ui/themes/styles.css";
import { Subscription } from "@/api/subscription/subscription";
import SubscriptionApi from "@/api/subscription/subscription-api.ts";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import PaymentForm from "./PaymentForm";

export default function SubscriptionFunc() {
  const [getSubscription, setSubscription] = useState<Subscription[]>();
  const [selectedPlan, setSelectedPlan] = useState<Subscription | null>(null);
  const [clientSecret, setClientSecret] = useState<string | null>(null);

  useEffect(() => {
    SubscriptionApi.members().then((res) => {
      if (res.isSuccess()) {
        setSubscription(res.result);
      }
    });
  }, []);

  const handlePaymentClick = async (plan: Subscription) => {
    setSelectedPlan(plan);
    // Fetch the client secret from your backend
    try {
      const response = await SubscriptionApi.payment(plan.memberId);
      if (response.isSuccess()) {
        setClientSecret(response.result);
      }
    } catch (error) {
      console.error("Error creating payment intent:", error);
    }
  };

  return (
    <div className="w-full p-8 flex flex-col items-center justify-center">
      <h1 className="text-3xl font-bold mb-8">选择商品</h1>
      <div className="w-[65%] bg-white p-8 rounded-3xl shadow-lg">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          {getSubscription?.map((plan, index) => (
            <Card
              key={index}
              className="w-full max-w-sm rounded-2xl overflow-hidden"
              style={{
                background: "linear-gradient(to right, #FFF0F5, #FFF5EE)",
                boxShadow: "0 0 0 1px rgba(255, 192, 203, 0.5)",
              }}
            >
              <CardHeader>
                <CardTitle className="text-xl relative">
                  {plan.cardName}{" "}
                  {plan.discount && (
                    <Badge
                      variant="secondary"
                      className="ml-2 bg-blue-500 text-white"
                    >
                      {plan.discount}
                    </Badge>
                  )}
                </CardTitle>
              </CardHeader>

              <CardContent>
                <div className="text-4xl font-bold">${plan.amount}</div>
                <div className="text-sm text-gray-500 mt-[10px]">
                  每{plan.period}
                </div>

                <div className="mt-4 text-sm">
                  {plan.rightList.map((right, index) => (
                    <div key={index}>
                      <div>{right.rightsName}</div>
                      <div className="mt-4 text-sm">{right.discount}</div>
                    </div>
                  ))}
                </div>
              </CardContent>
              <CardFooter>
                <Dialog>
                  <DialogTrigger asChild>
                    <Button
                      className="w-full rounded-xl text-white hover:bg-blue-500"
                      onClick={() => handlePaymentClick(plan)}
                    >
                      去支付
                    </Button>
                  </DialogTrigger>
                  <DialogContent className="bg-white sm:max-w-[425px]">
                    <DialogHeader>
                      <DialogTitle>支付信息</DialogTitle>
                    </DialogHeader>
                    <div className="grid gap-4 py-4">
                      <div className="grid grid-cols-4 items-center gap-4">
                        <p className="text-sm font-medium">商品：</p>
                        <p className="col-span-3">{selectedPlan?.cardName}</p>
                      </div>
                      <div className="grid grid-cols-4 items-center gap-4">
                        <p className="text-sm font-medium">价格：</p>
                        <p className="col-span-3">${selectedPlan?.amount}</p>
                      </div>
                      {clientSecret && (
                        <PaymentForm clientSecret={clientSecret} />
                      )}
                    </div>
                  </DialogContent>
                </Dialog>
              </CardFooter>
            </Card>
          ))}
        </div>
        {/* ... rest of the component remains the same ... */}
      </div>
    </div>
  );
}
